<template>
  <el-dialog
    :title="title + model.stateNum"
    :visible.sync="visible"
    :width="width"
    :close-on-click-modal="false"
    :show-close="showClose"
    :close-on-press-escape="false"
    :before-close="handleCancel"
  >
    <div class="hintDialog">
      <div class="text">{{ model.text }}</div>
      <div>{{ model.time }}</div>
      <el-image
        v-if="model.imgHint"
        class="imgHint"
        :src="model.imgHint" 
        :preview-src-list="[model.imgHint]">
      </el-image>
    </div>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      model: {},
      refName: 'ruleForm',
      visible: false,
      disableSubmit: false,
      showClose: false,
      updateState: '',
      title: '提示',
      width: '80%',
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    show(obj) {
      this.visible = true
      this.model = JSON.parse(JSON.stringify(obj))
      if (this.model.stateNum === 5 || this.model.stateNum === '5') {
        this.showClose = true
      }
    },
    modelClose() {
      this.visible = false
    },
    handleCancel(done) {
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
.hintDialog{
  height: 20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  font-size: 16px;
  .text{
    font-size: 24px;
  }
  .imgHint{
    width: 60%;
    width: 60%;
  }
}
</style>
